<template>
  <div class="app-container home">
    <div class="bg_fff full_w hbp">
      <div class="h_title f-15 c_000">
        快捷通道
        <span>
          <i
            class="el-icon-circle-plus-outline f-18 commhover ml_10 mr_10"
            @click="openMenu"
          ></i>
          <i class="el-icon-remove-outline f-18 commhover" @click="openMenu"></i>
        </span>
      </div>
      <div class="h_t_body mt_10">
        <div
          v-for="(item, index) in tdData"
          :key="index"
          class="t_item commhover bg_fff f-14"
          @click="goPage(item.allname)"
        >
          <!-- <svg-icon :icon-class="item.icon" class-name="icon mr_5" /> -->
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 消息 -->
    <div class="flexrowbetween h_msgbox mt_15 mb_15">
      <div class="c_primary f-13">
        <i class="el-icon-message-solid f-16 mr_10"></i>
        <span v-if="msgdata"> {{ msgdata }}条 活动待开始，请限时处理</span>
        <span v-else>暂无活动</span>
      </div>
      <el-button v-if="msgdata" type="primary" size="mini" @click="goPage('adminactionaclist')">立即处理</el-button>
    </div>
    <!-- 统计 -->
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
        <div class="bg_fff p_20 pt_15 full_w">
          <home-static :numData="num" />
          <div class="flexend typeitems">
            <span
              class="typeitem"
              :class="{ active: type == 'month' }"
              @click="changeType('month')"
              >按月</span
            >
            <span
              class="typeitem"
              :class="{ active: type == 'day' }"
              @click="changeType('day')"
              >按日</span
            >
          </div>
          <line-chart v-loading="dataLoading" :chart-data="lineChartData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
        <div class="bg_fff p_20 pt_32 pb_30 full_w">
          <el-row :gutter="15">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item mb_20">
                <img src="@/assets/images/icon1.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.resiger}}</div>
                <div class="f-14 f_000">今日注册</div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item mb_20">
                <img src="@/assets/images/icon2.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.login}}</div>
                <div class="f-14 f_000">今日登陆</div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item mb_20">
                <img src="@/assets/images/icon3.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.three_task}}</div>
                <div class="f-14 f_000">三日更新</div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item">
                <img src="@/assets/images/icon3.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.seven_task}}</div>
                <div class="f-14 f_000">七日更新</div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item">
                <img src="@/assets/images/icon4.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.seven_login}}</div>
                <div class="f-14 f_000">七日活跃</div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <div class="flexcolumn aligncenter justifycenter c_item">
                <img src="@/assets/images/icon4.png" alt="" class="iconimg" />
                <div class="f-20 fw f_000">{{count.month_login}}</div>
                <div class="f-14 f_000">月活跃</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 活动信息  -->
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
        <home-table />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
        <home-top />
      </el-col>
    </el-row>
    <el-dialog
      title="菜单栏"
      :visible.sync="open"
      width="680px"
      class="dialogheaderbg"
      :before-close="handleCloseAdd"
      :close-on-click-modal='false'
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="菜单权限">
          <el-checkbox
            v-model="menuNodeAll"
            @change="handleCheckedTreeNodeAll($event, 'menu')"
            >全选/全不选</el-checkbox
          >
          <el-tree
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            ref="menu"
            node-key="id"
            empty-text="加载中，请稍候"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HomeStatic from "./component/HomeStatic.vue";
import LineChart from "./component/LineChart.vue";
import HomeTable from "./component/HomeTable.vue";
import HomeTop from "./component/HomeTop";
import {
  monthCount,
  dayCount,
  myTaskToday,
  getShortcuts,
  setShortcuts,userCountData
} from "@/api/home";
import { getMenuList } from "@/api/roles";
import { handleTree } from "@/utils/index";

export default {
  data() {
    return {
      msgdata: 0,
      num: {
        all_task_num: 0,
        all_template_num: 0,
        all_user_num: 0,
        all_working_num: 0,
      },
      dataLoading: false,
      tdData: [],
      dataVal: [],
      type: "month",
      lineChartData: {
        taskData: [],
        userData: [],
        xData: [],
      },
      menuNodeAll: false,
      menuOptions: [],
      originOptions: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      open: false,
      form: {
        checkMenu: [],
      },
      count:{
        login:"",
        month_login:'',
        resiger:'',
        seven_login:'',
        seven_task:'',
        three_task:'',
      }
    };
  },
  components: {
    HomeStatic,
    LineChart,
    HomeTable,
    HomeTop,
  },
  mounted() {
    this.getmyTaskToday();
    this.getMonthCount();
    this.getShortcuts();
    this.userCountData()
  },
  methods: {
    getShortcuts() {
      getShortcuts().then((res) => {
        if (res.data) {
          this.tdData = res.data.list;
          this.dataVal = res.data.dataVal
        }
      });
    },

    userCountData(){
      userCountData().then(res=>{
        this.count = res.data
      })
    },

    getMonthCount() {
      this.dataLoading = true;
      if (this.type == "month") {
        monthCount().then((res) => {
          let data = res.data;
          this.num.all_task_num = data.all_task_num;
          this.num.all_template_num = data.all_template_num;
          this.num.all_user_num = data.all_user_num;
          this.num.all_working_num = data.all_working_num;
          let list = data.list;
          let task = data.task;
          let userData = [],
            taskData = [],
            xdata = [];
          xdata = Object.keys(list).sort();
          xdata.forEach((x) => {
            for (let item in task) {
              if (x == item) {
                taskData.push(task[item]);
              }
            }
            for (let user in list) {
              if (x == user) {
                userData.push(list[user]);
              }
            }
          });
          this.lineChartData.xData = xdata;
          this.lineChartData.userData = userData;
          this.lineChartData.taskData = taskData;
          this.dataLoading = false;
        });
      } else {
        dayCount().then((res) => {
          let data = res.data;
          this.num.all_task_num = data.all_task_num;
          this.num.all_template_num = data.all_template_num;
          this.num.all_user_num = data.all_user_num;
          this.num.all_working_num = data.all_working_num;
          let list = data.list;
          let task = data.task;
          let userData = [],
            taskData = [],
            xdata = [];
          xdata = Object.keys(list).sort();
          xdata.forEach((x) => {
            for (let item in task) {
              if (x == item) {
                taskData.push(task[item]);
              }
            }
            for (let user in list) {
              if (x == user) {
                userData.push(list[user]);
              }
            }
          });
          this.lineChartData.xData = xdata;
          this.lineChartData.userData = userData;
          this.lineChartData.taskData = taskData;
          this.dataLoading = false;
        });
      }
    },

    getmyTaskToday() {
      myTaskToday().then((res) => {
        this.msgdata = res.data;
      });
    },

    changeType(type) {
      this.type = type;
      this.getMonthCount();
    },

    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },

    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == "menu") {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
      } else if (type == "dept") {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },

    openMenu() {
      this.open = true;
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      getMenuList().then((response) => {
        this.menuOptions = handleTree(response.data);
        this.originOptions = response.data.map((item) => ({
          ...item,
          allname: item.app + item.controller + item.action,
        }));
        if (this.dataVal.length) {
          this.$nextTick(() => {
            this.dataVal.forEach((v) => {
              console.log('v:',v)
              this.$nextTick(() => {
                this.$refs.menu.setChecked(v, true, false);
              });
            });
          });
        }
      });
    },

    submitForm() {
      console.log(this.getMenuAllCheckedKeys());
      let params = {
        dataVal: this.getMenuAllCheckedKeys(),
        list: [],
      };
      if (params.dataVal.length) {
        params.dataVal.forEach((pitem) => {
          this.originOptions.forEach((item) => {
            if (pitem == item.id && item.type == 1) {
              params.list.push(item);
            }
          });
        });
      }
      setShortcuts({ data: JSON.stringify(params) }).then((res) => {
        this.$message.success("设置成功");
        this.getShortcuts();
      });
    },

    handleCloseAdd() {
      this.open = false;
      this.form.checkMenu = [];
    },

    goPage(name){
      this.$router.push({name})
    }
  },
};
</script>

<style lang="scss" scoped>
.hbp {
  padding: 10px 20px 15px;
  border-radius: 8px;
}
.t_item {
  padding: 10px;
  margin-right: 15px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(74, 115, 255, 0.2);

  &:hover {
    color: white;
    background: #4a73ff;
  }
}
.h_msgbox {
  border: 1px solid #88c1fd;
  background: #dfeefd;
  height: 34px;
  border-radius: 8px;
  padding: 0 15px;
}
.typeitems {
  width: 100%;
}
.typeitem {
  color: #959595;
  margin-top: 10px;
  margin-left: 15px;
  cursor: pointer;
  &.active {
    color: #4a73ff;
    border-bottom: 1px solid #4a73ff;
  }
}
.c_item {
  width: 100%;
  max-width: 160px;
  height: 160px;
  background-color: #edf6ff;
  border-radius: 8px;
}
.iconimg {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
}
</style>